<script lang="ts" setup>
import pageVue from "/src/lib/lay/page.vue";
import control from "/src/lib/action/control.vue";
import { reactive, ref, watch } from "vue";
import { IDCardNumber, CarId } from "/src/lib/encrypt/editRules.ts";
import { $ } from "../../../../lib/request";
import { modal  } from "vxe-table";


const createGridOptions = (status:string) => {
  const thisTotal=ref(0)
  return reactive({
    thisTotal,
    border: true,
    resizable: false,
    height: 384,
    rowId: "id",
    checkboxConfig: {
      reserve: true,
    },
    pagerConfig: {
      pageSize: 10,
    },
    editConfig: { trigger: "click", mode: "row", enabled: false },
    editRules: {
      CarId: CarId,
      IDCardNumber: IDCardNumber,
    },
    columns: [
      {
        type: "checkbox",
        width: 50,
      },
      { field: "customerName", title: "客户名称" },
      { field: "carCard", title: "车牌号", editRender: { name: "$input" } },
      {
        field: "productName",
        title: "物料名称",
        showOverflow: true,
        editRender: { name: "$input" },
      },
      {
        field: "driverName",
        title: "司机姓名",
        showOverflow: true,
        editRender: { name: "$input" },
      },
      {
        field: "phone",
        title: "联系电话",
        showOverflow: true,
        editRender: { name: "$input" },
      },
      {
        field: "idCard",
        title: "身份证号码",
        showOverflow: true,
        editRender: { name: "$input" },
      },
      {
        field: "isEntry",
        title: "是否禁行",
        showOverflow: true,
        editRender: { name: "$input" },
      }
    ],
    proxyConfig: {
      seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
      props: {
        result: "result",
        total: "page.total",
      },
      ajax: {
        // 接收 Promise
        query:({
          page: { currentPage, pageSize },
        }: {
          page: {
            currentPage: number;
            pageSize: number;
          };
        }) => {
          return new Promise((resolve) => {
            $.get('/oa/saas/product/cpclxx.do',{
              params:{
                status
              }
            }).then((res:any)=>{
              const {data:{data:{cpcszs:total,cpclxx:list}}}=res
              console.log('ok',res);
              
              thisTotal.value=total
              resolve({
              page: {
                total: list.length,
              },
              result: list.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              ),
            });
            })

            
          });
        }
      },
    },
  })
};

const lay=[
  
  {
    label:'已入场车辆：',
    gridOptions:createGridOptions('2')
  },
  {
    label:'排队车辆：',
    gridOptions:createGridOptions('3')
  },
  {
    label:'待入场车辆：',
    gridOptions:createGridOptions('1')
  }
]

// 初始化空对象
const initEmpty = (obj: object, init: number) => {
  Object.keys(obj).forEach((key) => {
    obj[key] !== init && !obj[key] && (obj[key] = init);
  });
  return obj;
};
let totalcar = ref(0);
const Pagechildren = [{ name: "top" }];
const tables:any=reactive({})
const tableLoad=(index:number)=>{
  // console.log(index);
  return (el:any)=>{
  tables[index]=el
  }
}
const saveTable=(index:number)=>{
  const $table=tables[index];console.log('table:',$table);
  
  const selectRecords = $table.getCheckboxRecords();
    const addList=[] as any[]
    selectRecords.forEach(({id,...item}:any) => {
      addList.push(initEmpty({...item},0))
    });
if(addList.length>0){
console.log('订单信息',JSON.stringify(addList).replace(/^\[+|\]+$/g, ''));

  $.get("oa/saas/product/cpclxxxg.do", { params: {
    updateList:JSON.stringify(addList).replace(/^\[+|\]+$/g, '')
  } }).then((respose) => {
  modal.message({ content: respose.data.message, status: "success" });
      $table.removeCheckboxRow()
  });
}else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
  
}

</script>
<template lang="pug">
pageVue( :children='Pagechildren')
  template(v-slot:top)
    .hjk
        .topp 成品车辆实时管控
        template(v-for="({label,gridOptions},index) in lay")
          .toppt 
              .ll {{label}}
              .cen
                .totalcar {{ gridOptions.thisTotal }}
              .unit 辆
          vxe-grid(v-bind="gridOptions"   highlight-hover-row :ref="tableLoad(index)")
          .bot
              vxe-button.bott(style="margin-right: 20px;" @click="gridOptions.editConfig.enabled=!gridOptions.editConfig.enabled" ) {{ gridOptions.editConfig.enabled ? '取消修改' : '信息修改' }}
              vxe-button.bott(style="margin-right: 20px;"  v-if="gridOptions.editConfig.enabled" @click="saveTable(index)") 确认修改
</template>
<style lang="scss" scoped>
.hjk {
  display: grid;
  gap: 20px;
  padding: 48px;
}
.topp {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #5d5d5d;
}
.toppt {
  align-items: center;
  display: flex;
  font-size: 18px;
  line-height: 18px;
  color: #000000;
  .cen {
    width: 63px;
    height: 31px;
    background: #eeeeee;
    margin-right: 4px;
    padding: 0 5px;
    .totalcar {
      line-height: 31px;
      font-size: 18px;
    }
  }
}
.headerr {
  width: 86%;
  margin: 20px auto;
  font-size: 18px;
  font-family: Source Han Sans CN;
  line-height: 36px;
  color: #000000;
  background: #f0faf2;
  border-radius: 10px;
  padding: 20px;
  .text {
    margin-left: 40px;
  }
}
.mid {
  font-size: 18px;
  color: #5d5d5d;
  font-weight: bold;
}
.bot {
  // display: flex;
  text-align: center;
  margin-bottom: -20px;
  padding: 0 5px;
  .bott {
    text-align: center;
    text-decoration: none;
    display: inline-block;
    // width: 94px;
    height: 34px;
    background: #f0faf2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    font-size: 18px;
    line-height: 34px;
    color: #5d5d5d;
  }
}
</style>
